<template>
  <!-- 注意：这里就是topNavState作用之处，根据当前路由所在根路由的type值判断显示不同顶部导航菜单 -->
  <el-row v-show="true" :span="12">
    <el-col :span="24">
      <el-menu :default-active="selectIndex" mode="horizontal" :router="false" @select="handleSelect">
        <el-menu-item index="AuthSystem">权限系统</el-menu-item>
        <el-menu-item index="BDMS">基础资料</el-menu-item>
        <el-menu-item index="OMS">订单管理系统</el-menu-item>
        <el-menu-item index="DMS">配送管理系统</el-menu-item>
        <el-menu-item index="BussisnessSystem">业务系统</el-menu-item>
      </el-menu>
    </el-col>
  </el-row>
</template>
<script>
// import 'element-ui/lib/theme-chalk/display.css';
// import {road} from '../../road.js'await
import pathToRegexp from 'path-to-regexp'
import store from '@/store'
export default {
  data() {
    return {
      selectIndex: 'AuthSystem',
      routUrl: ''
    }
  },
  watch: {
    $route(route) {
      // if you go to the redirect page, do not update the breadcrumbs
      console.log(route)
      if (route.meta && route.meta.topBarTitle) {
        const index = route.meta.topBarTitle
        const url = route.path
        this.routUrl = url
        this.handleSelect(index)
      }
    }
  },
  created() {
    const index = this.$route.meta.topBarTitle
    this.handleSelect(index)
  },
  methods: {
    pathCompile(path) {
      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
      const { params } = this.$route
      var toPath = pathToRegexp.compile(path)
      return toPath(params)
    },
    handleSelect(index) {
      if (this.selectIndex !== index) {
        this.selectIndex = index
        const permissionGrants = store.getters && store.getters.permissionGrants
        store.dispatch('permission/generateRoutes', { permissions: permissionGrants, topBarTitle: index }).then(response => {
          const { redirect, path } = response[0]
          if (redirect) {
            this.$router.push(redirect)
            return
          }
          this.$router.push(this.pathCompile(path))
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-menu--horizontal {
  cursor: pointer;
}
.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover, .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal > .el-menu-item.is-active {
  color: #606266;
  background-color: transparent;
  border-bottom: 2px solid #409EFF !important;
}
.el-menu--horizontal > .el-menu-item {
  height: 50px;
  line-height: 50px;
  color: #606266;
}
</style>
